<template>
  <section>
    <el-row justify="space-between" type="flex">
      <el-form :inline="true">
        <el-form-item label="专业">
          <el-select placeholder="请选择专业">
            <el-option></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="班级">
          <el-select placeholder="请选择班级">
            <el-option></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="逻辑班">
          <el-select placeholder="请选择逻辑班">
            <el-option></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="类型">
          <el-select placeholder="请选择类型">
            <el-option></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">查询</el-button>
        </el-form-item>
      </el-form>

      <el-form :inline="true">
          <el-form-item>
            <el-button type="primary">添加</el-button>
          </el-form-item>
      </el-form>
    </el-row>
    <el-table style="width: 100%" :default-sort="{prop: 'date', order: 'descending'}">
      <el-table-column type="index" :index="indexMethod" sortable label="序号">
      </el-table-column>
      <el-table-column prop="name" label="学生姓名" sortable>
      </el-table-column>
      <el-table-column prop="address" label="学号" :formatter="formatter">
      </el-table-column>
      <el-table-column prop="address" label="专业" :formatter="formatter">
      </el-table-column>
      <el-table-column prop="address" label="班级" :formatter="formatter">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="medium" @click="Check">查 看</el-button>
          <el-button size="medium" @click="Edit">编 辑</el-button>
          <el-button size="medium" type="danger" @click="Delete">删 除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 查看学生  -->
    <el-dialog title="查看学生页面" :visible.sync="CheckStudent" width="80%" :before-close="handleClose">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="相关考点">
                <span>{{ props.row.name }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="模块名称" prop="id">
        </el-table-column>
        <el-table-column label="考试时间" prop="name">
        </el-table-column>
        <el-table-column label="相关课程" prop="desc">
        </el-table-column>
      </el-table>
    </el-dialog>
    <!-- 编辑学生页面 -->
    <el-dialog title="编辑学生页面" :visible.sync="EditStudent" width="80%" :before-close="handleClose">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="相关考点">
                <span>{{ props.row.name }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="模块名称" prop="id">
        </el-table-column>
        <el-table-column label="考试时间" prop="name">
        </el-table-column>
        <el-table-column label="相关课程" prop="desc">
        </el-table-column>
      </el-table>
    </el-dialog>
  </section>
</template>
<script>
export default {
    data() {
        return {
            CheckStudent: false,
            EditStudent: false
        };
    },
    methods: {
        indexMethod(index) {
            return index + 1;
        },
        Check() {
            this.CheckStudent = true;
        },
        Edit() {
            this.EditStudent = true;
        },
        handleClose(done) {
            this.$confirm("确认关闭？")
                .then(_ => {
                    done();
                })
                .catch(_ => {});
        }
    }
};
</script>
